import { useDynamicList } from "ahooks"
import { Button } from "antd"
import { ActionGroup } from ".."
import FormSelect from "../../../components/cell/FormSelect"
import MyCard from "../../../components/core/MyCard"
import PageForm, { MyFormItemProps } from "../../../components/core/PageForm"
import { relationshipList } from "../../../enum"
import useIntentModel from "../../../model/useIntentModel"
import InputCell from "../cell/inputCell"
import { useGetUiState } from "../helper/init"

const GuarantorInfosGroup = ({ title, groupkey }: ActionGroup) => {

    const { entryInfo, updateGuarantorInfo, updateListData } = useIntentModel()
    const { isViewMode } = useGetUiState()
    const { guarantorInfos } = entryInfo || {}

    const relationship = (i: number) => {
        return <FormSelect
            onChange={v => updateGuarantorInfo({ person: updateListData(v, 'person', i, entryInfo?.guarantorInfos, 'relationship') })}
            disabled={isViewMode}
            options={relationshipList}
            value={guarantorInfos?.relationship}
            keyName="GuarantorInfosGroup_relationship" />
    }

    const childrenForPerson = (index: number): Array<MyFormItemProps> => {
        return [
            { label: '担保人姓名', children: <InputCell methodkey="updateGuarantorInfo" updatekey="name" additionalkeys={['person', index]} disabled={isViewMode} /> },
            { label: '担保人证件号', children: <InputCell methodkey="updateGuarantorInfo" updatekey="idNo" additionalkeys={['person', index]} disabled={isViewMode} /> },
            { label: '担保人手机号', children: <InputCell methodkey="updateGuarantorInfo" updatekey="mobile" additionalkeys={['person', index]} disabled={isViewMode} /> },
            { label: '担保人通讯地址', children: <InputCell methodkey="updateGuarantorInfo" updatekey="address" additionalkeys={['person', index]} disabled={isViewMode} /> },
            { label: '与申请人关系', children: relationship(index) },
            { label: '操作', children: <Button onClick={() => push(<PageForm formList={childrenForPerson(index + 1)} loopKey="GuarantorInfosGroup" />)}>添加担保人</Button> }
        ]
    }

    const { list, push } = useDynamicList([{}]);

    return <MyCard groupkey={groupkey} title={title}>
        {
            list.map((_, i) => {
                return <PageForm key={`guarantorInfosGroup_${groupkey}_${i}`} formList={childrenForPerson(i)} loopKey="GuarantorInfosGroup" />
            })
        }
    </MyCard >

}

export default GuarantorInfosGroup